<template>
	<div class="flex-col justify-between" style="height: 100%">
		<n-form style="margin-top: 24px" ref="formRef" :model="form" :rules="rules" label-placement="top"
			label-width="120" require-mark-placement="right-hanging">

			<n-form-item label="选择AI模型" path="name">
				<jb-select url="aiResource/listAllEnabledType" labelField="name" placeholder="请选择AI模型" valueField="sn"
					v-model:value="form.model"></jb-select>
			</n-form-item>
			<n-form-item label="是否保持上下文" path="useContext">
				<n-radio-group v-model:value="form.useContext" name="radiogroup">
					<n-space>
						<n-radio :value="true">
							是
						</n-radio>
						<n-radio :value="false">
							否
						</n-radio>
					</n-space>
				</n-radio-group>
			</n-form-item>
			<n-form-item label="Max_Tokens">
				<n-input-number style="width: 100%" v-model:value="form.maxTokens" placeholder="请输入Max_Tokens"
					max="8192"></n-input-number>
			</n-form-item>
			<n-form-item label="temperature">
				<n-input style="width: 100%" :precision="2" v-model:value="form.temperature"
					placeholder="请输入temperature"></n-input>
			</n-form-item>
			<n-form-item label="top_p" path="top_p">
				<div style="display: flex;flex-direction: column;width: 100%">
					<n-slider v-model:value="form.topP" :step="0.1" :max="1" />
					<span style="font-size: 12px;margin-top: 8px">调节句子生成的多样性，值越大生成的内容越丰富多样，建议值为0.9</span>
				</div>
			</n-form-item>
			<n-form-item label="top_k" path="top_k">
				<div style="display: flex;flex-direction: column;width: 100%">
					<n-input-number style="width: 100%" :precision="0" v-model:value="form.topK" placeholder="请输入TopK值"
						max="100">
					</n-input-number>
					<span style="font-size: 12px;margin-top: 8px">限制每次生成时考虑的词汇数量，值越大创造性越强，建议值为50</span>
				</div>
			</n-form-item>
			<n-form-item label="System Message">
				<n-input v-model:value="form.systemRole" type="textarea" style="min-height: 200px"
					placeholder="请输入System Message"></n-input>
			</n-form-item>
			<n-form-item label="Prompt模版">
				<n-input v-model:value="form.promptTpl" type="textarea" style="min-height: 200px"
					placeholder="请输入Prompt模版"></n-input>
			</n-form-item>
		</n-form>
		<div class="flex justify-center">
			<jb-btn type="primary" @click="handleSubmit">提交-更新基础配置</jb-btn>
		</div>
	</div>


</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue'
	import {
		JBoltApi
	} from '@/service/request'
	import { showSuccessMsg } from '@/utils/service/msg.js'

	const props = defineProps({
		appId: {
			type: String
		},
	})

	const formRef = ref(null)

	const form = ref({
		useContext: true,
		maxTokens: 2000,
		temperature: "",
		topP: 0,
		topK: 0,
		systemRole: '',
		promptTpl: "",
		model: '',
	})

	const rules = {
		maxTokens: {
			required: true,
			message: '请输入maxTokens',
			trigger: 'change'
		},
		temperature: {
			required: true,
			message: '请输入temperature',
			trigger: 'change'
		},
		topP: {
			required: true,
			message: '请输入top_p',
			trigger: 'change'
		},
		topK: {
			required: true,
			message: '请输入top_k',
			trigger: 'change'
		},
	}

	async function handleSubmit() {
		await formRef.value?.validate()
		console.log('提交表单', JSON.stringify(form.value))
		let url = '/aiAppConfig/updateConfig';
		await JBoltApi.post(url, {
			linkType: 'app',
			linkId: props.appId,
			configType: 'llmConfig',
			configValue: JSON.stringify(form.value)
		}).then(res=>{
			
			showSuccessMsg('保存成功');
		});
	}


	function loadConfigData() {
		JBoltApi.get(`/aiAppConfig/getConfigByCondition`, {
			linkType: "app",
			linkId: props.appId,
			configType: 'llmConfig'
		}).then(res => {
			console.log("返回的值", res.result.data);
			form.value = res.result.data;

		})
	}




	onMounted(() => {
		if (props.appId) {
			loadConfigData()
		}
	})
</script>

<style scoped lang="scss">
</style>